<template>
  <div id="indexApp">
    <div class="content" ref="homeScroll" >
      <!-- 非移动门户页面 -->
      <div v-if="errorPage" class="error-page">
        <div class="error-page-title">
          <span @click="exit"></span>
          <p>二维码</p>
        </div>
        <div class="error-page-wrap">
          <span></span>
          <p>{{name}}</p>
          <div><p>无效二维码</p></div>
        </div>
      </div>
      <!-- 移动门户 -->
      <div v-else class="info-page" :class="{'success': successPage}">
        <mx-header :fixFlag="true" :left-options="{preventGoBack: true}" @on-click-back="exit"></mx-header>
        <div class="info-page-wrap">
          <div class="user-avatar"><img :src="avatar" @error="loadUserAvatarError"/></div>
          <!-- <div class="text-result">
            <span></span>
            <p>{{successPage ? '核验通过' : '核验失败'}}</p>
          </div> -->
          <!-- 用户信息 -->
          <div class="user-wrap">
            <p class="user-name">{{name}}</p>
            <p class="user-uid">工号: {{uid}}</p>
            <div class="user-info">
              <div class="user-info-left">
                <p>部门</p>
                <p class="user-info-text">{{dept}}</p>
              </div>
              <div>
                <p>电话</p>
                <p class="user-info-text">{{mobile}}</p>
              </div>
            </div>
          </div>
          <!-- 核酸信息 -->
          <!-- <div class="hs-wrap">
            <div class="hs-info">
              <span>核酸</span>
              <span class="hs-result">{{hsResult}}</span>
              <span class="hs-time">时间<span>{{hsTime}}</span>天</span>
            </div>
            <div class="hs-info">
              <span>疫苗</span>
              <span class="hs-ym">{{ymResult}}</span>
            </div>
          </div> -->
          <!-- logo图片 -->
          <img class="logo-icon" src="../../assets/img/BOElogo.png" alt="logo"/>
          <!-- 时间 -->
          <div class="date">当前时间：{{ date }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import Native from '@/service/native'
import MxHeader from '../../components/mx-header'
import { getUserCardUrl } from '../../utils'

export default {
  data() {
    return {
      defaultCardIcon: require('../../assets/img/defaultUserHeader.jpg'),
      name: '',
      avatar: '',
      uid: '',
      dept: '',
      mobile: '',
      hsResult: '',
      hsTime: '',
      ymResult: '',
      errorPage: false,
      successPage: true,
      date: ''
    }
  },
  components: {
    MxHeader
  },
  mounted() {
    this.getUrlParam()

    // 水印
    const { uid, cn } = this.userData
    const watermarkTime = new Date().toLocaleDateString()
    this.$watermark.set(`${cn}(${uid}) ${watermarkTime}`)

    // 时间定时器
    this.timer = window.setInterval(() => {
      this.date = new Date().toLocaleString()
    }, 1000)
  },
  computed: {
    ...mapGetters('userStore', ['userData'])
  },
  methods: {
    // 获取url参数
    getUrlParam() {
      const param = (this.$route.params && this.$route.params.uid) ? this.$route.params : this.$route.query || {}
      const { name = '', uid = '', dept = '', mobile = '', hsResult = '', hsTime = '', ymResult = '', source = '' } = param

      // 非移动门户页面 - 报错
      if (!decodeURIComponent(source || '') || decodeURIComponent(source || '') !== 'mobileportal') {
        this.errorPage = true
        this.name = decodeURIComponent(name)
        return
      }

      this.name = decodeURIComponent(name)
      this.uid = decodeURIComponent(uid)
      this.dept = decodeURIComponent(dept)
      this.mobile = decodeURIComponent(mobile)
      this.hsResult = decodeURIComponent(hsResult)
      this.hsTime = decodeURIComponent(hsTime)
      this.ymResult = decodeURIComponent(ymResult)

      // if (!this.hsResult && !this.hsTime && !this.ymResult) {
      //   this.successPage = false
      // }

      if (!this.name || !this.uid) {
        this.successPage = false
      }

      // 用户头像
      this.avatar = getUserCardUrl(this.uid)
    },

    // 获取用户头像失败 - 没有头像
    loadUserAvatarError() {
      this.avatar = this.defaultCardIcon
    },
    exit () {
      Native.api.exit()
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  background: #fff;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  font-family: 'PingFang SC','Microsoft YaHei', 'SimHei';
}
.error-page {
  background: gray;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  .error-page-title {
    font-size: .18rem;
    color: #FFFFFF;
    letter-spacing: 0;
    font-weight: 400;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: 0.35rem;
    text-align: center;
    margin-top: 0.15rem;
    max-height: 10%;

    display: flex;
    align-items: center;
    justify-content: start;
    span {
      display: inline-block;
      width: .1rem;
      height: .18rem;
      margin-left: .21rem;
      background: url(../../assets/img/fanhui@2x.png) no-repeat;
      background-position: center;
      background-size: 100%;
    }
    p {
      flex: 1;
      margin-right: 0.31rem;
    }
  }
  .error-page-wrap {
    width: 3.41rem;
    height: 80%;
    background: #fff;
    border-radius: .33rem;
    span {
      display: inline-block;
      width: .35rem;
      height: .43rem;
      margin-left: .45rem;
      background: url(../../assets/img/qrcode@2x.png) no-repeat;
      background-position: center;
      background-size: 100%;
    }
    p {
      font-size: .24rem;
      color: #4A4A4A;
      font-weight: bold;
      margin-top: .67rem;
      text-align: center;
    }
    div {
      width: 2.47rem;
      height: 2.47rem;
      background: url(../../assets/img/qrcode-bgview.png) center center;
      background-size: 100%;
      background-repeat: no-repeat;
      border-radius: 0.1rem;
      margin:  .76rem auto 0;
      display: flex;
      align-items: center;
      justify-content: center;
      p {
        height: .5rem;
        width: 1.42rem;
        background: #C5C5C5;
        border-radius: .1rem;
        font-family: MicrosoftYaHei;
        font-size: .18rem;
        color: #000000;
        line-height: .5rem;
        font-weight: bold;
        margin: 0 auto;
      }
    }
  }
}
.info-page-wrap {
  overflow: hidden;
  width: 100%;
}
.info-page {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  &.success {
    .user-avatar {
      border: 1px solid #56C64A;
      box-shadow:
        0.05rem 0rem .1rem 0 #E0FDCC inset,
        -0.05rem 0rem .1rem 0 #E0FDCC inset,
        0rem 0.05rem .1rem 0 #E0FDCC inset,
        0rem -0.05rem .1rem 0 #E0FDCC inset;
    }
    .text-result {
      background-color: rgba(224,253,204,0.89);
      border: 1px solid rgba(86,198,74,1);
      span {
        background-image: url('../../assets/img/success_icon@2x.png');
        border-color: rgba(138,193,73,.24);
      }
      p {
        color: #57C64A;
      }
    }
    .hs-ym {
      color: #50E3C2!important;
    }
  }
  .user-avatar {
    width: 1.65rem;
    height: 2rem;
    margin: .5rem auto 0;
    border: 1px solid rgba(255,170,0,1);
    box-shadow:
      0.1rem 0rem 0.1rem 0 #FDF1CC inset,
      -0.1rem 0rem .1rem 0 #FDF1CC inset,
      0rem 0.1rem .1rem 0 #FDF1CC inset,
      0rem -0.1rem .1rem 0 #FDF1CC inset;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 1.45rem;
      height: 1.85rem;
      object-fit: contain;
      border: none;
    }
  }
  .text-result {
    margin: .45rem auto 0;
    width: 3.29rem;
    height: 0.65rem;
    background-color: #FDF1CC;
    border: 1px solid #FFAA00;
    position: relative;
    span {
      background: url('../../assets/img/fail_icon@2x.png') no-repeat;
      background-position: center;
      background-size: 100%;
      border: .08rem solid rgba(255,150,0,.24);
      border-radius: 50%;
      display: inline-block;
      width: 0.34rem;
      height: 0.34rem;
      position: absolute;
      top: -0.25rem;
      left: 50%;
      margin-left: -0.25rem;
    }
    p {
      font-size: .18rem;
      color: #FFAA00;
      letter-spacing: 0;
      font-weight: 400;
      margin-top: .3rem;
    }
  }
  .user-wrap {
    text-align: center;
    margin-top: .25rem;
    .user-name {
      font-size: .22rem;
      color: #000000;
      text-align: center;
      font-weight: 700;
    }
    .user-uid {
      font-size: .16rem;
      color: #999999;
      text-align: center;
      line-height: .24rem;
      font-weight: 400;
      margin-top: .02rem;
    }
    .user-info {
      display: flex;
      align-content: center;
      justify-content: center;
      margin-top: .25rem;
      div {
        width: 50%;
      }
      .user-info-left {
        border-right: 1px solid rgba(153,153,153,1);
      }
      p {
        font-family: MicrosoftYaHei;
        font-size: .14rem;
        color: #000000;
        text-align: center;
        line-height: .24rem;
        font-weight: 400;
      }
      .user-info-text {
        font-size: .16rem;
        font-weight: 700;
      }
    }
  }
  .hs-wrap {
    margin-top: .25rem;
    .hs-info {
      width: 3.29rem;
      height: .3rem;
      line-height: .3rem;
      background: rgba(216, 216, 216, .36);
      margin: 0 auto .04rem;

      span {
        font-size: .15rem;
        color: #4A4A4A;
        letter-spacing: 0;
        font-weight: 400;
        width: 30%;
        float: left;
      }
      .hs-result, .hs-time span, .hs-ym {
        font-size: .17rem;
        color: #50E3C2;
        font-weight: 400;
        display: inline-block;
      }
      .hs-result{
        width: 30%;
      }
      .hs-time {
        width: 40%;
        float: right;
        span {
          font-size: .22rem;
          line-height: .25rem;
          float: none;
          margin: 0 0.05rem;
          width: auto;
        }
      }
      .hs-ym {
        color: #FFAA00;
        width: 30%;
        word-break: keep-all;
      }
    }
  }
  .logo-icon {
    width: 1.9rem;
    display: block;
    margin: 0.25rem auto .1rem;
  }
  .date {
    font-size: .12rem;
    color: #4A4A4A;
    letter-spacing: 0;
    font-weight: 400;
    margin-bottom: .1rem;
  }
}

</style>
